<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "..",
        "title": "Pixel Documentation - Gulp"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "..",
                "docs-path": "."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>Gulp commands</h1>
                            <p class="lead text-dark">Here we'll explain what each gulp command does.</p>
                        </div>
                        <div class="my-5 mb-5" id="local-server">
                            <h5 class="mb-3">How to run a local server</h5>
                            <p>Developing with Pixel is extremely easy. All you have to do to run a local server is writing the following command in the folder where <code class="text-danger">gulpfile.js</code> is located:</p>
                            <pre class="bg-primary language-bash"><code class="language-bash">gulp</code></pre>
                            <h6>What does it do?</h6>
                            <p>It watches for any change you will make in the project and compiles the code and refreshes your browser with the modified changes.</p>
                            <p>We recommend using this command if you choose to use the awesome features of <code class="text-dark">Sass</code>.</p>
                        </div>
                        <div class="my-5 mb-5" id="dist">
                            <h5 class="mb-3">How to build the project for production/distribution?</h5>
                            <p>Pixel has you covered. All you have to do is write the following command:</p>
                            <pre class="bg-primary language-bash"><code class="language-bash">gulp build:dist</code></pre>
                            <p>This command will generate a <code class="text-danger">dist/</code> folder where you'll get all the files necessary to go live with your awesome website. Images are automatically optimized and the files are minified.</p>
                        </div>
                        <div class="my-5 mb-5" id="dev">
                            <h5 class="mb-3">How to get a classic version of the project - without Sass, Gulp or npm</h5>
                            <p>Even if Sass has some awesome features, maybe you just need the plain old CSS, HTML and JS stack. We though about this, so run the following command:</p>
                            <pre class="bg-primary language-bash"><code class="language-bash">gulp build:dev</code></pre>
                            <p>This command will generate a <code class="text-danger">html&css/</code> folder where you'll get all the required files to use without Sass, Gulp or npm. This code is beatified and the CSS is documented with commenting sections.</p>
                        </div>
                        <div class="my-5 mb-5" id="dev">
                            <h5 class="mb-3">Working with the starter folder</h5>
                            <p>To start working with the starter folder just run the following command:</p>
                            <pre class="bg-primary language-bash"><code class="language-bash">gulp starter</code></pre>
                            <p>This command does what the default <code class="text-danger">gulp</code> command does but only for what is in the <code class="text-danger">starter/</code> folder. It creates a temporary <code class="text-danger">./starter-temp</code> folder from where the files are being served by BrowserSync.</p>
                        </div>
                        <hr>
                        <div class="my-5 mb-5">
                            <h5 class="mb-3">Getting support</h5>
                            <p>If you have specific questions about the theme's <code class="text-danger">gulpfile.js</code>,
                                <a href="#">please contact us here</a>.</p>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#local-server" class="nav-link" data-smooth-scroll>Local server</a>
                            </li>
                            <li class="nav-item">
                                <a href="#dist" class="nav-link" data-smooth-scroll>Production/distribution code</a>
                            </li>
                            <li class="nav-item">
                                <a href="#dev" class="nav-link" data-smooth-scroll>Only CSS, HTML and Javascript</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../"
    })
</body>

</html>